<!--
 * @Descripttion: 
 * @version: 
 * @Author: captern@icloud.com
 * @Date: 2023-05-08 18:23:20
 * @LastEditors: captern
 * @LastEditTime: 2023-05-09 11:30:01
-->

<template>
  <component :is="tag" :style="styleProps" class="bz-text-component" @click="handleClick">
    {{ text }}
  </component>
</template>

<script setup lang="ts" name="asdasd">
import { computed } from 'vue'
import { pick } from 'lodash-es'
import { type TextComponentProps } from '@/types/defaultProps'
import { textStylePropNames } from '@/constant'
import useComponentCommon from '@/hooks/useComponentCommon'

interface ScTextProps extends TextComponentProps {
  tag?: 'div'
}
const props = withDefaults(defineProps<ScTextProps>(), {
  tag: 'div'
})
const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames)
</script>

<style lang="scss" scoped>
.bz-text-component {
  box-sizing: border-box;
  white-space: pre-wrap;
  position: relative !important;
}
h2,
p {
  .bz-text-component {
    margin-bottom: 0;
  }
}
button {
  .bz-text-component {
    padding: 5px 10px;
    cursor: pointer;
  }
}
</style>
